<template>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem">
        <template v-slot:contentHeaderCustom="scope">
            <div style="padding:20px 20px 0 20px">
                <div style="color: #303133;font-size: 22px;font-weight: bold;font-family: PingFang SC;">订单号:
                    <span style="margin-left: 5px;">{{ data.info.num || '' }}</span>

                    <span class="label-pain-blue" style="margin-left: 20px;">学员数量：{{data.info.itemAmount||0}}</span>
                    <span class="label-pain-blue" style="margin-left: 10px;"
                        v-if="data.info.statusCode == 'paying'">待打款</span>
                    <span class="label-pain-blue" style="margin-left: 10px;" v-if="data.info.statusCode == 'paid'">已打款</span>
                    <span class="label-pain-blue" style="margin-left: 10px;">应付金额：{{data.info.price||''}}元</span>
                    <span class="label-pain-red" style="margin-left: 10px;" v-if="data.info.payPrice !== data.info.finalPrice">已退款：{{data.info.refundPrice}}元</span>
                </div>
                <div class="left-title" style="margin: 25px 0;">打款信息</div>
                <div style="font-size: 13px;">
                    <span>付款金额：{{ data.info.payPrice||0 }}元</span>
                    <span style="margin-left: 100px;">打款时间：{{ data.info.payTime || '' }}</span>
                    <span style="margin-left: 100px;">打款说明：{{ data.info.payDescription||'' }}</span>
                </div>
                <div style="font-size: 13px;margin:14px 0 20px 0;display: flex;justify-content: flex-start;">
                    <span>打款凭证：</span>
                    <img v-if="data.info.payReceiptUrl" style="width: 176px;height: 83px;" :src="data.info.payReceiptUrl" alt="" @click="previewPayReceiptUrl">
                </div>
              <div v-if="data.info.orderRefundPoList !== undefined && data.info.orderRefundPoList.length > 0" class="left-title" style="margin: 25px 0;">退款信息</div>
              <div v-if="data.info.orderRefundPoList !== undefined && data.info.orderRefundPoList.length > 0" style="font-size: 13px;">
                <div>退款账号名称：{{ data.info.orderRefundPoList[0].accountName || '' }}</div>
                <div style="margin-top: 14px">退款账号：{{ data.info.orderRefundPoList[0].account || '' }}</div>
                <div style="margin-top: 14px">退款原因：{{ data.info.orderRefundPoList[0].description || '' }}</div>
              </div>
                <div class="left-title" style="margin:20px 0 -10px 0;">学员列表</div>
            </div>
        </template>
    </tablePaging>
    <el-dialog
      v-model="dialogVisible"
      title="打款凭证"
      width="800px"
      append-to-body
    >
      <img
        :src="data.info.payReceiptUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
</template>
<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { tableItem, operationItem, orderDetailApi, refundApplyApi, orderInfoApi } from './const.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const dialogVisible = ref(false);
const route = useRoute()
const data = reactive({
    selectList: [],
    info: {},
    request: {
        "orderId": route.query.id || '',
        "name": "",
        "idCard": "",
        "refundStatusCode": ""
    }
})
// 搜索
operationItem.menuArray[0].handle = () => {
  tableItem.pageInfo.paging()
}
onMounted(() => {
  if(route.query.type === 'view') {
    operationItem.menuArray[1].show = false
  } else if(route.query.type === 'refund') {
    operationItem.menuArray[1].show = true
  }
    tableItem.pageInfo.request.orderId = route.query.id || ''
    tableItem.pageInfo.paging()
    initInfo()
    tableItem.selectChange = selectChange
    operationItem.menuArray[1].handle = refundHandle
})
const refundHandle = () => {
    if (data.selectList.length == 0) { ElMessage.warning('请选择退款学员'); return }
    return ElMessageBox.confirm(
        `确定给${data.selectList.length}名学员退款?`
    ).then(() => {
        refundApplyApi({orderItemIdList: data.selectList || []}).then((res) => {
          if(res.code === 200) {
            ElMessage.success(res.msg || '操作成功')
            tableItem.pageInfo.paging()
          }
        }).catch((res) => {ElMessage.error(res.msg || '操作失败') })
    })
}
const initInfo = () => {
    orderInfoApi(route.query.id || '').then((res) => {
        data.info = res.data
    })
}
const selectChange = (row) => {
    data.selectList = []
    row.map((item) => {
        item.id ? data.selectList.push(item.id) : ''
    })
}
const initDetail = () => {
    orderDetailApi(tableItem.pageInfo.request).then((res) => {
        tableItem.tableData.data = res.rows || []
    })
}

const previewPayReceiptUrl = () => {
    dialogVisible.value = true;
}

</script>
